<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3 class-03</title>
  <link href="favicon.ico" rel="shortcut icon">
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id='app'>
    <Comp></Comp>
  </div>

  <template id='todo-item'>
    <!-- Vue 3 现在正式支持了多根节点的组件，也就是片段！-->
    <!-- 片段: https://v3.cn.vuejs.org/guide/migration/fragments.html -->
    <li>(Comp) This is a todo</li>
    <hr>
    <br >
    <div>
      <a href="http://https://v3.cn.vuejs.org/guide/component-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C">组件注册</a>
    </div>
  </template>

  <!-- 写法一 全局注入组件 -->
  <!-- <script>
    const app = Vue.createApp({})
    // 定义名为 todo-item 的新组件
    app.component('Comp', {
      template: '#todo-item'
    })
    app.mount('#app')
  </script> -->

  <!-- 写法二  局部组件 -->
  <script>
    const CompCCCC = { // 局部组件只能给 当前 mount 的 id,，如果多个 mount + id,其他的id 内部不能使用 改 组件
      components: {
        Comp: { template: '#todo-item' }
      }
    }
    const app = Vue.createApp(CompCCCC)
    app.mount('#app')
  </script>
</body>

</html>